<template>
  <view class="login-index" @click="jump">
    <view class="content">
      <z-swiper ref="testRef" v-model="state.listCount" :options="state.swiperConfig">
        <z-swiper-item
            :custom-style="state.slideCustomStyle"
        >
          <view class="component">
            <Index :height="'85vh'" @jump-next="jump"></Index>
          </view>
        </z-swiper-item>
        <z-swiper-item
            :custom-style="state.slideCustomStyle"
        >
          <view class="component">
            <Login :height="'85vh'"></Login>
          </view>
        </z-swiper-item>
        <z-swiper-item
            :custom-style="state.slideCustomStyle"
        >
          <view class="component">
            <Register :height="'85vh'"></Register>

          </view>
        </z-swiper-item>
      </z-swiper>
    </view>
  </view>
</template>

<script setup>
import Login from "./components/login.vue";
import Index from "./components/index.vue";
import Register from "./components/register.vue";
import {onMounted, reactive, ref} from "vue";

const testRef = ref(null)
const jump = () => {
  testRef.value.swiper.slideNext()
}
const state = reactive({
  listCount: Array(...Array(3)),
  list: [
    {
      component: 'login',
      name: '登录',
    }
  ],
  swiperConfig: {
    slidesPerView: 1,
    effect: 'cards'
  },
  slideCustomStyle: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '36rpx'
  },
})
onMounted(() => {
  if (uni.getStorageSync("token")) {
    uni.switchTab({
      url: "/pages/message/index"

    })
  }

})

</script>

<style lang="scss" scoped>
.login-index {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  background-color: #f0ad4e;

  .content {
    .component {
      width: 90%;
      border-radius: 24 rpx;
    }
  }

}


</style>
